<template>
	<!-- 新建文件夹对话框 -->
	<n-modal
		title="新建文件夹"
    v-model:show="modelVisible"
    preset="dialog"
		:close-on-click-modal="false"
		width="580px"
		@close="handleDialogClose"
    positive-text="确认"
    negative-text="算了"
    @positive-click="handleDialogSure"
    @negative-click="handleDialogClose"
	>
		<n-form :model="form" :rules="formRules" ref="addFolderFormRef"
			label-width="100px"
			label-position="top"
		>
      <n-h4>
        <span>当前路径：</span>
        <span>{{targetFilePath}}</span>
      </n-h4>
			<n-form-item label="文件夹名称" path="fileName">
				<n-input
					v-model:value ="form.fileName"
					placeholder="请输入文件夹名称"
					type="textarea"
          clearable
				></n-input>
			</n-form-item>
		</n-form>
	</n-modal>
</template>

<script lang="ts" setup>
import {fileController} from '@/api/file/fileController'
import {FormItemRule,useMessage } from 'naive-ui'
import {ref} from "vue";
import Bus from '@/components/file/box/GlobalUploader/utils/bus.js'
const message = useMessage()

const addFolderFormRef = ref(null)
const targetFilePath = ref('/')


const modelVisible = ref(false)

const sureBtnLoading = ref(false)

const form = ref({
  fileName: ''
})

/**
 * 校验规则，对文件名进行校验
 */
const formRules = {
  fileName: [
    { required: true, message: '请输入文件夹名称', trigger: 'blur' },
    { validator (rule: FormItemRule, value: string) {
      console.log('value',value)
        const fileNameReg = new RegExp(`[\\\\/:*?"<>|]`)
        if (value && fileNameReg.test(value)) {
          return new Error(`文件夹名称不能包含下列任何字符：\\/:*?"<>|`)
        }
        return true
      }, trigger: ['blur', 'change'] }
  ]
}


const showDialog =(filePath:string) =>{
  targetFilePath.value = filePath
  modelVisible.value = true
}

const hideDialog = () =>{
  modelVisible.value = false
}

defineExpose({
  showDialog,
  hideDialog
})



/**
 * 取消按钮点击事件 & 对话框关闭的回调
 * @description 关闭对话框，重置表单
 */
const handleDialogClose= () => {
  // addFolderForm.value.resetFields()
  modelVisible.value = false
}


/**
 * 确定按钮点击事件
 * @description 校验表单，校验通过后调用新建文件夹接口
 */
const handleDialogSure = () => {
  sureBtnLoading.value = true
  addFolderFormRef.value?.validate((errors) => {
    if (!errors) {
      fileController.createFold({
          fileName: form.value.fileName,
          filePath : targetFilePath.value
        }).then((res) => {
          sureBtnLoading.value = false
          if (res.code === 200) {
            message.success('文件夹创建成功')
            form.value.fileName = '';
            Bus.emit('refreshFileList')
            modelVisible.value = false
            return true
          } else {
            message.error(res.data)
            return false
          }
        }).catch(() => {
          sureBtnLoading.value = false
        })
    } else {
      sureBtnLoading.value = false
      return false
    }
  })


  // addFolderFormRef.value.validate((err: any) => {
  //   console.log(err)
  //   if (!err) {
  //     sureBtnLoading.value = false
  //     return false
  //   } else {
  //     console.log('123')
  //     fileController.createFold({
  //       fileName: addFolderForm.value.fileName,
  //       filePath : props.filePath
  //     }).then((res) => {
  //       sureBtnLoading.value = false
  //       if (res.success) {
  //         message.success('文件夹创建成功')
  //         addFolderForm.value.resetFields()
  //         modelVisible.value = false
  //         // this.callback('confirm')
  //       } else {
  //         message.warning(res.message)
  //       }
  //     }).catch(() => {
  //       sureBtnLoading.value = false
  //     })
  //   }
  // })
}



</script>
